<template>
  <div class="huanying">
    <header>
    <div class="left"><img src="../assets/img/未标题-2.png" @click='home'></div>
      <div class="center">我的</div>
      <div class="right"></div>
    </header>
   <main>
     <div class="top">
       <div class="left">
         <img src="../assets/img/zuihou-tou.png" class="tou" >
         <p>劳动纪律</p>
         <img src="../assets/img/nan-nv.png" class="nan" >
       </div>
       <div class="right">
         <img src="../assets/img/未标题-3.png" >
       </div>
     </div>
     <div class="center">
       我的聊聊
     </div>
     <div class="bottom">
       <div>浏览记录</div>
       <div>我的收藏</div>
     </div>
     <ul>
     <li><p><span>22.MB</span>清理缓存</p></li>
     <li><p>关于我们</p></li>
     <li><p>意见反馈</p></li>
     <li><p>我的反馈</p></li>
     <li><p>检查更新</p></li>
     <li><p>售后服务电话</p></li>
     
     </ul>
   </main>
  </div>
</template>
<script type="text/javascript">
export default {
  name: 'xinxi',
  data () {
    return {
      msg: '我的'
    }
  },
  methods: {
    home: function () {
      this.$router.go(-1)
    }
  }
}
</script>
<style scoped lang="less">
  @import '.././assets/css/reset.css';
  @import '.././assets/css/index.less';

  .huanying{
    width: 100%;
    height: 100%;
    
  }
   header {
    .height(150);
    position: fixed;
    top: 0;
    width: 100%;
    background:#1a1a1a;
    display: flex;
    text-align: center;
    align-items: center;
      .left,.right{
        display: flex;

        .width(80);
        img{
          .height(30);
          display: block;
          margin: auto;

        }
      }
      .center{
       flex:1;
        .font-size(60);
        color: #be8f59;
      }
    }
  main{
    .font-size(40); 
    height: 100%;
   .padding(150,0,0,0);
   .top{
    background: #ffffff;
     .padding(30,30,30,30);
     display: flex;
     justify-content:space-between;
     align-items: center;
     border-top:10px solid #be8f59;
     border-bottom:10px solid #be8f59;
    .left{
      display: flex;
      align-items: center;
      img{
        display: block;
      }
      .tou{
        .height(140);
      }
      .nan{
        .height(40);
      }
      p{
        .padding(0,10,0,10);
      }
    }
    right{
      img{
         .height(40);
      }
    }
   }
   .center{
    .margin(20,0,0,0);
    .padding(30,30,30,30);
    
     border-top:10px solid #be8f59;
     border-bottom:10px solid #be8f59;
     background: #ffffff;
   }
   .bottom{
      display: flex;
      background: #ffffff;
      .margin(20,0,0,0);
      .padding(30,0,30,0);
       border-bottom:3px solid black; 
      div{
        width: 50%;

        border-left:3px solid black; 
        text-align: center;
      }
      div:first-child{
        border:none;
      }
   }
   ul{
    li{
       border-bottom:3px solid black;
       .font-size(40); 
       .line-height(90);

      p{
        .padding(0,30,0,30);
        span{
          float: right;
        }
      }
    }
   }
   
  }
 </style>
